<template>
    <!-- 贡献分图标 -->
    <span @click="showOverlay" class="user-contribution">
        <image-vant
        class="user-contribution-level-icon user-info-icon" 
        :src="img"
        :height="imgSty.height"
        :width="imgSty.width"
        :class="contributionClass"
        ></image-vant>
        <span :class="contributionClass" class="user-contribution-level-text">{{offer}}</span>

        <!-- 用户贡献分级别弹窗 -->
        <div v-show="overlayIsShow && isShowWindow" class="icon-explain-common-div">
            <div class="icon-explain-common-top">
                <div class="icon-explain-common-top-roundness-big"></div>
                <div class="icon-explain-common-top-roundness-white">
                    <img id="user-contribution-level-explain-img" :src="img">
                </div>
            </div>
            <div class="icon-explain-common-text-div">
                <div id="user-contribution-level-explain-title" class="icon-explain-common-title">{{title}}</div>
                <div id="user-contribution-level-explain-text" class="icon-explain-common-text">{{explain}}</div>
            </div>
            <a @click.stop="hideOverlay" class="icon-explain-common-btn" select-id="committee-association-explain-windows">【关闭当前弹窗】</a>
        </div>
    </span>
</template>

<script>
// 自定义组件
import ImageVant from "_components/project/common/ImageVant"

// 自定义方法
import { getProImg } from "_projectFn/images" 

// 本地图片
import contributionYellow from "_assets/img/user-contribution-level-yellow.svg"
import contributionGray from "_assets/img/user-contribution-level-gray.svg"

export default {
    name: 'Contribution',
    props: {
        offer: {
            type: Number,
            default: 0
        },
        overlayIsShow: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            contributionClass: this.offer > 0 ? 'contribution-well' : 'contribution-bad',
            imgSty: {
                width: 15,
                height: 15,
            },
            title: this.offer > 0 ? '正值贡献分' : '负值贡献分',
            explain: this.offer > 0 ? '用户贡献分>0' : '用户贡献分<0',
            img: this.offer > 0 ? getProImg('user-contribution-level-yellow.svg', contributionYellow) : getProImg('user-contribution-level-gray.svg', contributionGray),
            isShowWindow: false,
        }
    },
    methods: {
        showOverlay() {
            this.isShowWindow = true
            this.$emit('showOverlay', 'contribution')
        },
        hideOverlay() {
            this.isShowWindow = false
            // console.log('toHideOverlay')
            this.$emit('toHideOverlay')
        }
    },
    watch: {
        overlayIsShow() {
            if (this.overlayIsShow === false) this.isShowWindow = false
        }
    },
    components: {
        ImageVant,
    },
}
</script>

<style lang="scss" scoped>
    .user-contribution {
        letter-spacing: 0;
        font-size: 12px;
        cursor: pointer;
        position: relative;
        top: 1px;
    
        img {
            position: relative;
            top: 2px;
        }
        
        .contribution-well {
            color: #F97B02;
        }
        
        .contribution-bad {
            color: #999999;
        }
        
        .user-contribution-level-text {
            position: relative;
            right: 2px;
            top: 3px;
            margin-left: 2px;
        }
    }

    .icon-explain-common-div {
        position: fixed;
        width: 220px;
        height: 280px;
        background: white;
        z-index: 102;
        top: 50%;
        left: 50%;
        margin-top: -150px;
        margin-left: -110px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    
        .icon-explain-common-top {
            position: relative;
            height: 120px;
            width: 100%;
            overflow: hidden;
        }
        
        .icon-explain-common-top-roundness-big {
            position: absolute;
            height: 320px;
            width: 320px;
            background: #0d91f8;
            border-radius: 50%;
            top: -242px;
            left: 50%;
            margin-left: -160px;
        }
        
        .icon-explain-common-top-roundness-white {
            position: absolute;
            height: 70px;
            width: 70px;
            background: white;
            border-radius: 50%;
            left: 50%;
            margin-left: -40px;
            top: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .common-top-roundness-img {
            width: 66px;
        }
        
        .free-answer-explain-icon {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: url(https://www.mrobiji.com/images/association-quiz-reward-standard.svg) no-repeat center / contain;
            display: -webkit-flex;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 36px;
            color: white;
        }
        
        .ban-answer-explain-icon {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: url(https://www.mrobiji.com/images/association-quiz-reward-forbidden.svg) no-repeat center / contain;
            display: -webkit-flex;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 36px;
            color: white;
        }
        
        .icon-explain-common-text-bounty {
            color: #333333 !important;
            font-size: 14px !important;
        }
        
        .icon-explain-common-top-roundness-white-img {
            width: 100%;
            height: 100%;
        }
        
        .teamwork-icon {
            width: 82%;
            height: 30px;
            border: 1px solid #0077bf;
            color: #0077bf;
            border-radius: 4px;
            line-height: 30px;
            text-align: center;
            margin-bottom: 5px;
            font-size: 16px;
            font-weight: bold;
        }
        
        .hot-association-icon {
            width: 40px;
            height: 44px;
            border: 2px solid #ff0505;
            color: #ff0505;
            font-size: 28px;
            line-height: 44px;
            text-align: center;
        }
        
        .committee-association-icon {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            font-size: 38px;
            background: #ff6601;
            color: white;
            display: -webkit-flex;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .essence-icon-association, .super-essence-icon-association {
            cursor: pointer;
        }
        
        .icon-explain-common-text-div {
            height: 120px;
            width: 100%;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        .icon-explain-common-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .icon-explain-common-text {
            font-size: 12px;
            color: #999999;
            line-height: 20px;
        }
        
        .icon-explain-common-btn {
            height: 40px;
            width: 100%;
            display: -webkit-flex;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999999;
            border-top: 1px solid #eeeeee;
            font-size: 12px;
        }
        
        #user-level-explain-img {
            width: 40px;
        }
        
        #user-contribution-level-explain-img {
            width: 50px;
        }

        #partner-help-explain-img {
            width: 50px;
        }
    }
</style>